import React, { Component, PropTypes } from 'react';
import './index.css';
import SideBar from '../../components/SideBar';
import {Breadcrumb, Icon} from 'antd';
import Header from '../../components/Header';
import { connect } from 'react-redux';
import { userMenu, notificationUnreadQuery, notificationNewQuery } from '../../actions'
import { Link } from 'react-router'

class App extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount(){
    console.log("App,componentWillMount");
    //发起获取menu action
    const { userId, roleId } = this.props;
    this.props.dispatch(userMenu.request()(userId));

  }

  componentWillReceiveProps(next){
    console.log("App,componentWillReceiveProps, next=", next);

    //定时查询是否有登录以来新的未读通知
    //动态计算
    let timeStep = 5 * 60 * 1000;//默认五分钟
    if (next.roleId instanceof Array && next.roleId.findIndex((id)=>{return id==6}) >= 0) {
      timeStep = 1 * 30 *  1000;//就业中心管理员5秒
    }

    this.timer && clearTimeout(this.timer);
    this.timer = setInterval(() => {
      if(next.roleId instanceof Array && next.roleId.findIndex((id)=>{return id==6 || id==5}) >= 0) {
        //发起最新通知查询
        this.props.dispatch(notificationNewQuery.request()());
      }
      //查询是否有未读的通知
      this.props.dispatch(notificationUnreadQuery.request()());
    }, timeStep);
  }


  componentWillUnmount () {
    console.log("App,componentWillUnmount");
    this.timer && clearTimeout(this.timer);
  }

  render() {
    let breadcrumbItems = null;
    const { userName, menu, path, isHavingUnread } = this.props;
    //找到当前页面的
    if (path == '/' || path == "/notification") {
      breadcrumbItems = (
        <Breadcrumb>
          <Breadcrumb.Item key="0"><Link to="/">首页</Link></Breadcrumb.Item>
        </Breadcrumb>
      );
    } else {
      if (menu instanceof Array && menu.length > 0) {
        breadcrumbItems = menu.map((itemL1) => {
          let menuL2 = itemL1.child.find((itemL2) => {
              return (itemL2.path == path);
          });

          if (menuL2 != null) {
            console.log(itemL1.key,menuL2.key );
            return (
              <Breadcrumb>
                <Breadcrumb.Item  key="0"><Link to="/">首页</Link></Breadcrumb.Item>
                <Breadcrumb.Item key={itemL1.key}>{itemL1.title}</Breadcrumb.Item>
                <Breadcrumb.Item key={menuL2.key}>{menuL2.title}</Breadcrumb.Item>
              </Breadcrumb>
            );
          }
        });
      }
    }
    return (
      <div className="ant-layout-aside">
        <SideBar menu={menu} />
        <div className="ant-layout-main">
          <Header userName={userName} {...this.props} isHavingUnread={isHavingUnread} />
          <div className="ant-layout-breadcrumb">
            {breadcrumbItems}
          </div>
          <div className="ant-layout-container">
            <div className="ant-layout-content">
              <div style={{ minHeight: 590 }}>
                {this.props.children}
              </div>
            </div>
          </div>
          <div className="ant-layout-footer">
            内蒙古科技大学网签平台 版权所有 © 2015
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    userId: state.user.userId,
    userName: state.user.name,
    roleId: state.user.roleIdList,
    menu: state.user.menu,
    path:state.routing.locationBeforeTransitions.pathname,
    isHavingUnread: state.notification.isHavingUnread,
  };
}

export default connect(mapStateToProps) (App);
